<!--  -->
<template>
  <div class="my">
    <div class="header">
      <div class="header-top">
        <dl>
          <dt>
            <img :src="ruleForm.img" alt="" />
          </dt>
          <dd>
            <h3>{{ ruleForm.username }}<van-icon name="invition" /></h3>
            <p>17606141773</p>
          </dd>
        </dl>
      </div>
      <div class="header-bottom">
        <ul>
          <li>
            <van-icon name="column" color="#67C23A" /><span>我的发布</span>
          </li>
          <li><van-icon name="star" color="#E6A23C" /><span>收藏</span></li>
          <li>
            <van-icon name="manager" color="#F56C6C" /><span>浏览历史</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="content">
      <ul>
        <li>支付明细<van-icon name="arrow" /></li>
        <li>问题反馈<van-icon name="arrow" /></li>
        <li>联系客服<van-icon name="arrow" /></li>
      </ul>
    </div>
    <div class="button">
      <button @click="exit()">退出登录</button>
    </div>
  </div>
</template>

<script>
export default {
  // 组件状态值
  data() {
    return {
      ruleForm: [],
    };
  },
  // 计算属性
  computed: {},
  // 组件方法
  methods: {
    exit() {
      this.$router.push("/login");
    },
    Name() {
      this.ruleForm = localStorage.getItem("ruleForm");
      this.ruleForm = JSON.parse(this.ruleForm);
      console.log(this.ruleForm.username);
    },
  },
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.Name();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang="scss" scoped>
.my {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  width: 100%;
  border-radius: 10px;
  // border: 2px solid #f2f2f2;
  box-shadow: 0 0 9px 3px #e7e7e7;
}
.header-top {
  border-bottom: 2px solid #f2f2f2;
  dl {
    padding: 10px;
    display: flex;
    img {
      width: 70px;
      height: 70px;
      border-radius: 50%;
    }
    dd {
      margin-left: 10px;
      h3 {
        margin-top: 5px;
        .van-icon {
          margin-left: 40px;
          color: #409eff;
        }
      }
      p {
        height: 50px;
        line-height: 50px;
      }
    }
  }
}
.header-bottom {
  padding: 10px 0;
  ul {
    display: flex;
    li {
      width: 33%;
      display: flex;
      flex-direction: column;
    }
    .van-icon {
      font-size: 30px;
    }
    span {
      display: block;
      font-size: 14px;
    }
  }
}
.content {
  flex: 1;
  li {
    height: 50px;
    border-bottom: 7px solid #f2f2f2;
    display: flex;
    justify-content: space-between;
    padding: 0 5px;
    align-items: center;
    .van-icon {
      color: #999;
    }
  }
}
.button {
  width: 100%;
  text-align: center;
  button {
    width: 90%;
    height: 40px;
    background: red;
    border-radius: 20px;
    border: 0;
    color: #fff;
    font-size: 17px;
  }
}
</style>
